import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import ReactMarkdown from 'react-markdown';

const MarkDownPreView = (props:any, ref:any) => {
    const { content } = props;
    const [ documentContent, setDocumentContent ] = useState('');
    useImperativeHandle(ref, ()=>{
        return {
            setDocumentContent:setDocumentContent
        };
    });
    useEffect(() => {
        setDocumentContent(content);
    }, [ content ]);
    return (
        <div className="markdown-body" style={{ padding: '30px', borderRadius: '10px' }}>
            {/* eslint-disable-next-line react/no-children-prop */}
            <ReactMarkdown children={documentContent} />
        </div>
    );
};
export default forwardRef(MarkDownPreView);
